<template>
	<view class="guide-detail">
		<view class="content">
			<view class="header">
				<view class="box">
					<view class="userImg">
						<image class="img"
							:src="detail.avatar? $u.fileBaseUrl + detail.avatar :'../../../static/images/me/default-avatar-orange.png' "
							mode="aspectFill"></image>
					</view>
					<view class="userInfo">
						<view class="name">
							{{detail.nickname}}
						</view>
						<view class="time">
							{{detail.updateTime}}
						</view>
					</view>
				</view>
				<view class="follow" v-if="detail.isConcern == 0" @click="getfocusOrCancelFocusUser(detail)">
					<button>关注</button>
				</view>
				<view class="unfollow" v-if="detail.isConcern==1" @click="getfocusOrCancelFocusUser(detail)">
					<button>取消关注</button>
				</view>
				<uni-icons type="trash-filled" size="30" color="#ccc" v-if="detail.isConcern==2"
					@click="getdeletemoment(detail.id)"></uni-icons>
			</view>
			<image class="image" v-if="images.length <= 1"
				:src="detail.images? $u.fileBaseUrl + detail.images : '../../../static/images/index/zwtp.png' "
				mode="widthFix" @click="getImage(detail.images)">
			</image>
			<swiper v-else circular :indicator-dots="true" :circular="true" :autoplay="true" :interval="5000"
				:duration="duration" indicator-active-color="#ffffff">
				<swiper-item v-for="(i,d) in images" :key="d">
					<image class="img" :src="i? $u.fileBaseUrl+i :'../../../static/images/index/zwtp.png' "
						mode="aspectFit" @click="getpreviewImage(images)">
					</image>
				</swiper-item>
			</swiper>

			<!-- </view> -->
			<view class="title">
				{{detail.title}}
			</view>
			<view class="desc">
				<u-parse :content="detail.content"></u-parse>
				<!-- {{detail.content}} -->
			</view>
			<!-- <view class="address-box">
				<view class="left">
					<u-icon name="map" color="#2979ff" size="32"></u-icon>
					<text class="address">{{detail.address}}</text>
				</view>
				<view class="right">
					{{detail.juli}}
				</view>
			</view> -->
			<view class="comment-box">
				<view class="sum">
					共{{total}}条评论
				</view>
				<view class="input-box">
					<!-- <image class="img" :src="detail.avatar? $u.fileBaseUrl + detail.avatar :'' " mode="aspectFill">
					</image> -->
					<view class="input">
						<u--input v-model="commentValue" placeholder="说点什么..." border="surround" inputAlign='left'
							:customStyle="{border:'none'}"></u--input>
						<view class="save" v-if="commentValue" @click="getmomentComments(detail.id)">
							发送
						</view>
					</view>
				</view>
				<u-empty v-if="commentList.length <= 0" mode="comment" width="50%" textSize="30"
					icon="http://cdn.uviewui.com/uview/empty/comment.png">
				</u-empty>
				<view class="comment-list">
					<view class="item-box" v-for="(item,index) in commentList" :key="index">
						<view class="item">
							<view class="userImg">
								<image class="img"
									:src="item.avatar? $u.fileBaseUrl+ item.avatar : '../../../static/images/me/default-avatar-orange.png' "
									mode="aspectFill"></image>
							</view>
							<view class="comment-info">
								<view class="userInfo">
									<view class="name">
										{{item.nickname}}
									</view>
									<view class="time">
										{{item.createTime}}
									</view>
								</view>
								<view class="comment-content">
									{{item.comments}}
								</view>
							</view>

						</view>
						<view class="del" v-if="detail.isConcern ==2" @click="getdelcomment(item.id)">
							<text>删除</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <u-modal :show="showdel" :title="title" :content='content' @cancel="showdel = false" @confirm="getdeletemoment(detail.id)">
			确认删除
		</u-modal> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				commentValue: "", //评论内容
				detail: {},
				commentList: [],
				total: 0,
				page: {
					pageNum: 1,
					pageSize: 10
				},
				type: 0,
				showdel: false, //删除
				images: []
			}
		},
		methods: {
			// 攻略详情数据
			async getmomentDetail(id) {
				let res = await this.$u.api.getmomentDetail({
					id: id
				})
				if (res.code == 200) {
					this.detail = res.data
					this.images = this.detail.images.split(',')
				}
			},
			// 轮播图预览
			getpreviewImage(images) {
				let img = images.map(path => this.$u.fileBaseUrl + path);
				uni.previewImage({
					current: this.$u.fileBaseUrl + images, // 当前显示图片的http链接
					urls: img // 需要预览的图片http链接列表
				})
			},
			// 单张图片预览
			getImage(images) {
				uni.previewImage({
					current: this.$u.fileBaseUrl + images, // 当前显示图片的http链接
					urls: [this.$u.fileBaseUrl + images] // 需要预览的图片http链接列表
				})
			},
			// 关注 取消关注
			async getfocusOrCancelFocusUser(detail) {
				let res = await this.$u.api.getfocusOrCancelFocusUser({
					focusId: detail.uid,
					type: detail.isConcern == 1 ? 0 : 1,
				})
				if (res.code == 200) {
					this.$u.toast('关注成功')
					this.getmomentDetail(this.id)
				}
			},
			// 评论
			async getmomentComments(id) {
				let res = await this.$u.api.getmomentComments({
					comments: this.commentValue,
					momentId: id
				})
				if (res.code == 200) {
					this.getmomentCommentslist()
					this.commentValue = ''
					this.$u.toast('评论成功')
				}
			},
			// 评论列表
			async getmomentCommentslist() {
				let res = await this.$u.api.getmomentCommentslist({
					id: this.id,
					pageNum: this.page.pageNum,
					pageSize: this.page.pageSize
				})
				if (res.code == 200) {
					// 如果是第一页，直接替换数据
					if (this.page.pageNum == 1) {
						this.commentList = res.rows;
					} else {
						// 如果不是第一页，追加数据
						this.commentList = [...this.commentList, ...res.rows];
					}
					this.total = res.total;
				}
			},
			// 删除
			getdeletemoment(id) {
				let that = this
				uni.showModal({
					title: '确认删除吗?',
					async success(res) {
						if (res.confirm) {
							let res = await that.$u.api.getdeletemoment({
								id: id
							})
							if (res.code == 200) {
								that.$u.toast('删除成功')
								that.getmomentDetail()
								uni.navigateBack()
							}
						} else if (res.cancel) {
							that.$u.toast('取消删除')
						}
					}
				})
			},
			// 删除评论
			async getdelcomment(id) {
				let that = this
				uni.showModal({
					title: '确认删除评论吗?',
					async success(res) {
						if (res.confirm) {
							let res1 = await that.$u.api.getdelmomentComments({
								id: id
							})
							if (res1.code == 200) {
								that.$u.toast('删除评论成功')
								that.getmomentCommentslist()
							}
						} else if (res.cancel) {
							that.$u.toast('取消删除评论')
						}
					}
				})
			},
			// 上拉加载
			loadMore() {
				// 模拟异步加载数据
				if (this.commentList.length >= this.total) {
					uni.showToast({
						title: '没有更多评论了',
						icon: "none"
					});
					return;
				}
				this.page.pageNum += 1;
				uni.showLoading({
					title: '加载中...'
				});

				this.getmomentCommentslist().then(() => {
					uni.hideLoading();
				}).catch(error => {
					console.error('加载更多数据时出错:', error);
					uni.hideLoading();
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					});
				});
			},
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中...'
			})
			this.id = options.id
			if (options.type) {
				this.type = options.type
			}
			this.getmomentDetail(this.id)
			this.getmomentCommentslist()
			setTimeout(() => {
				uni.hideLoading()
			}, 500)
		},
		onShow() {
			// this.getmomentDetail(this.id)
			// this.getmomentCommentslist()
			// setTimeout(() => {
			// 	uni.hideLoading()
			// }, 500)
		},
		// 上拉加载
		onReachBottom() {
			this.loadMore();
		},
	}
</script>

<style lang="scss" scoped>
	.guide-detail {
		background-color: #FFFFFF;
		min-height: 100vh;
		padding: 0 10rpx env(safe-area-inset-bottom);

		// position: relative;

		.content {
			width: 100%;
			padding: 10rpx;
			background: #f1f1f1;
			border-radius: 10rpx;
			// padding: 2%;
			// box-sizing: border-box;

			.header {
				width: 92%;
				position: absolute;
				z-index: 9999;
				top: 30rpx;
				left: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.box {
					display: flex;
					align-items: center;
					background-color: #fff;
					padding: 6rpx 20rpx 6rpx 6rpx;
					border-radius: 80rpx;

					.userImg {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						margin-right: 12rpx;
						overflow: hidden;

						.img {
							width: 100%;
							height: 100%;
							
						}
					}
					
					

					.userInfo {

						.name {
							font-size: 26rpx;
							color: #111;

						}

						.time {
							font-size: 20rpx;
							color: #999;
						}
					}

				}


				.follow,.unfollow {
					display: flex;
					align-items: center;
					justify-content: flex-end;

					button {
						background-color: #ccc;
						color: #fff;
						font-size: 18rpx;
						padding: 10rpx 15rpx;
						border-radius: 30rpx;
						
					}
				}
			}

			.image {
				width: 100%;
			}

			swiper {
				width: 100%;
				height: 400rpx;

				.img {
					width: 100%;
					// height: 400rpx;
				}
			}

			.title {
				text-align: center;
				font-size: 36rpx;
				margin: 30rpx 0;
				color: #111;
			}

			.desc {
				display: block;
				width: 100%;
				font-size: 28rpx;
				color: #666;
				line-height: 1.5;
				word-wrap: break-word;
				word-break: break-all;
				white-space: normal;
				text-indent: 2ch;
				padding-bottom:50rpx;
			}

			.address-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;
				background-color: rgba($color, .1);
				padding: 20rpx;
				border-radius: 20rpx;

				.left {
					display: flex;
					align-items: center;

					.address {
						margin-left: 10rpx;
						font-size: 28rpx;
						color: #666;
					}
				}

				.right {
					font-size: 28rpx;
					color: #999;
				}
			}

			.comment-box {
				.sum {
					text-align: right;
					margin-top: 20rpx;
					border-top: 2rpx solid #b7b7b7;
					padding: 20rpx 0;
					color: #999;
				}

				.input-box {
					width: 100%;
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					// .img {
					// 	width: 80rpx;
					// 	height: 80rpx;
					// 	border-radius: 50%;
					// 	overflow: hidden;
					// 	margin-right: 20rpx;
					// }

					.input {
						display: flex;
						align-items: center;
						flex: 1;
						height: 60rpx;
						border-radius: 40rpx;
						background-color: #f6f6f6;
						padding: 0 20rpx;
						font-size: 26rpx;
						color: #666;

						.save {
							background-color: $overall-color;
							color: #fff;
							padding: 10rpx 20rpx;
							border-radius: 40rpx;
							margin-left: 20rpx;
						}
					}
				}

				.comment-list {
					margin-top: 40rpx;

					.del {
						display: flex;
						align-items: center;
						justify-content: flex-end;

						text {
							color: #999;
							font-size: 24rpx;
						}
					}

					.item-children {
						margin-left: 100rpx;
						border-bottom: 2rpx solid #ccc;
						padding-top: 0rpx !important;
					}

					.item,
					.item-children {
						display: flex;
						align-items: center;
						padding: 30rpx 0;


						.userImg {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							overflow: hidden;
							margin-right: 20rpx;

							.img {
								width: 100%;
								height: 100%;
							}
						}

						.userInfo {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.name {
								color: #333;
								font-size: 26rpx;
							}

							.time {
								margin-left: 20rpx;
								font-size: 20rpx;
								color: #ccc;
							}
						}

						.comment-content {
							width: 580rpx;
							font-size: 22rpx;
							color: #bbb;
							word-wrap: break-word;
							word-break: break-all;
							white-space: normal;
						}
					}
				}

			}

		}


	}
</style>